<template>
  <div class="material-main">
    <el-dialog
      title="选择素材"
      :visible.sync="dialog"
      width="60%"
      append-to-body
      @close="handleClose"
    >
      <div class="content">
        <div class="card">
          <div slot="header">
            <el-upload class="btn-upload" action="/admin/xy/upload/uploadImg" :on-success="handleSucee">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <!-- 选择富文本才显示 -->
            <div v-if="type==1"><el-input v-model="selImgUrl" placeholder="" />
              <el-button @click="handleCopy(selImgUrl,$event)">copy</el-button></div>
          </div>
          <MyPagination :page="page" />
          <el-row :gutter="30">
            <el-col v-for="m in imgList" :key="m.id" class="img-block-fk" :span="6">
              <el-card class="img-card" :class="{'selected':m.id==selId}" shadow="hover" @click.native="sel(m.id,Url.host+'/'+m.dir+'/'+m.fileName)">
                <el-image
                  style="width: 90%; height: 300px"
                  :src="Url.host+'/'+m.dir+'/'+m.fileName"
                  fit="contain"
                />
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
      <span slot="footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSel">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import materialApi from '@/api/content/material'
import MyPagination from '@/components/common/Pagination'
import pageMixin from '@/mixins/pageMixin'
import Url from '@/api/config'
import _ from 'lodash'
import { resetData, resetVmData } from '@/utils/index'
import clip from '@/utils/clipboard'
export default {
  name: 'ArticleMaterial',
  components: {
    MyPagination
  },
  mixins: [pageMixin],
  data() {
    return {
      dialog: false,
      Url,
      search: {},
      imgList: [],
      editId: '', // 标识哪个被编辑
      page: {
        limit: 12,
        sizes: [12, 24, 356]
      },
      selId: '',
      selImgUrl: '',
      type: 0 // type: 0/1  0  为选择封面 ; 1 为选择内容 . 选择封面需要$emit执行父组件事件,不需要复制,否则需要复制
    }
  },
  created() {
  },
  methods: {
    openDialog(type) {
      this.type = type
      this.dialog = true
      this.getImgList()
    },
    getImgList() {
      var params = {
        start: this.page.start,
        limit: this.page.limit,
        ...this.search
      }
      params = _.pickBy(params, item => item)
      console.log(this.search)
      console.log(params)

      materialApi.getImgList(params).then(({ data }) => {
        this.imgList = data.list
        this.page.start = data.pageNumber
        this.page.limit = data.pageSize
        this.page.total = data.totalRow
      })
    },
    handleSucee() {
      // 成功后刷新列表
      this.getImgList()
    },
    doSearch() {
      resetData(this, 'page')
      this.getImgList()
    },
    doResetSearch() {
      resetData(this, 'search')
      this.getImgList()
    },
    handleClose() {
      // 重置所有表单
      resetVmData(this)
      this.dialog = false
    },
    handleSel() {
      var url = this.selImgUrl
      this.$emit('handle-cover-sel', url)
      this.handleClose()
    },
    handleCopy(v, event) {
      clip(v, event)
    },
    sel(id, url) {
      this.selId = this.selId == id ? '' : id
      // 如果选中了才有
      if (this.selId) {
        this.selImgUrl = url
      } else {
        this.selImgUrl = ''
      }
    }

  }
}
</script>
<style lang="css">
     .img-block-fk{
            position: relative;
      }
        .img-block-fk .selected::after{
            position: absolute;
            left: 0;
            top: 0;
            content: '√';
            display: block;
            font-size: 30px;
            color: #67C23A;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 400px;
            background-color: rgba(0,0,0,.5);
        }
</style>

<style lang='scss' scoped>
.material-main {
  .card {
    margin: 30px;
    box-sizing: border-box;
    ::v-deep .el-card__body {
      text-align: center;
    }
  }
  .content {
    .img-block {
      margin: 20px auto;
      height: 400px;
      }

      .tool-bar {
        display: flex;
        justify-content: space-around;
        align-items: center;
        .title {
          font-size: 14px;
          color: #333;
          &.unnamed {
            color: #909399;
          }
        }
        .size {
          font-size: 12px;
          color: #333;
        }
      }
    }

}
</style>
